import {inject, provide} from "vue";
import darkVars from '../../config/dark.json';
import lightVars from '../../config/light.json';
const themeSymbol = Symbol('theme');
type Themes  = 'dark' | 'light'
type ThemeContext = {
    /**
     * 设置主题
     * @param themeName 主题名称
     */
    setCurrentTheme: (themeName: Themes) => void;
}
export const useThemeProvide = (): void => {
    let currentTheme: Themes = 'light';
    const lessHandler = (themeName: Themes) => {
        switch (themeName) {
            case 'dark': {
                (window as any).less.modifyVars(darkVars);
                break;
            }
            case 'light': {
                (window as any).less.modifyVars(lightVars);
                break;
            }
        }
    };
    const setCurrentTheme = (themeName: Themes) => {
        currentTheme = themeName;
        lessHandler(themeName);
    };
    setCurrentTheme('light');
    provide(themeSymbol, {
        setCurrentTheme,
    });
};
export const useThemeInject = () => {
    const themeContext = inject<ThemeContext>(themeSymbol);
    if (!themeContext) {
        throw new Error('useInject must be used after useProvide');
    }
    return themeContext;
};

